<template>
    <div class="topBox">
        <div class="wordBox">
            <wordcloudchart id="echarts05" :json-list="jsonList"/>
        </div>
        <div class="tops">
            <div id="myChart"></div>
        </div>
    </div>
</template>
<script>
    import wordcloudchart from "./WordCloudChart.vue";
    import apis from "../../public/api";

    export default {
        name: "topBox",
        components: {
            wordcloudchart
        },
        data() {
            return {
                config: {
                    value: 66
                },
                colors: ["#3882FE", "#7F5DFF", "#F64074"],
                jsonList:null
            };
        },
        mounted() {
            // this.drawLine();
            this.loadData();
        },

        methods: {
            loadData() {
                this.axios.get(apis.queryKeywordTopRank, {params: {}})
                    .then(res => {
                        if (res.data.success) {
                            const data = res.data.result;
                            this.jsonList = res.data.result;
                            //取前6条数据
                            this.handleBarData(data);
                        }
                    });
            },
            handleBarData(data) {
                if (data && Array.isArray(data)) {
                    let barData = data.slice(0, 6);
                    let yAxisData = [];
                    let xAxisData = [];
                    let total = 0;
                    barData.forEach((item) => {
                        yAxisData.push(item.value);
                        xAxisData.push(item.name);
                        total += Number(item.value);
                    });
                    const totalData = Array(6).fill(total);
                    let that = this;
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = that.$echarts.init(document.getElementById("myChart"));
                    // 绘制图表
                    myChart.setOption({
                        xAxis: {
                            max: total,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        grid: {
                            left: "33%",
                            right: "15%"
                        },
                        yAxis: [
                            {
                                type: "category",
                                inverse: true,
                                data: xAxisData,
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    show: false
                                }
                            }
                        ],
                        series: [
                            {
                                // 内
                                type: "bar",
                                barWidth: 14,
                                silent: true,
                                itemStyle: {
                                    color: function (params) {
                                        return that.colors[params.dataIndex%that.colors.length];
                                    }
                                },
                                label: {
                                    normal: {
                                        formatter: "{b}",
                                        textStyle: {
                                            color: function (params) {
                                                return that.colors[params.dataIndex%that.colors.length];
                                            },
                                            fontSize: 14
                                        },
                                        position: "left",
                                        distance: 20, // 向右偏移位置
                                        show: true
                                    }
                                },
                                data: yAxisData,
                                z: 1,
                                animationEasing: "elasticOut"
                            },

                            {
                                // 分隔
                                type: "pictorialBar",
                                itemStyle: {
                                    normal: {
                                        color: "#0E1428"
                                    }
                                },
                                symbolRepeat: "fixed",
                                symbolMargin: 2,
                                symbol: "rect",
                                symbolClip: true,
                                symbolSize: [3, 28],
                                symbolPosition: "start",
                                symbolOffset: [3, 0],
                                symbolBoundingData: total,
                                data: totalData,
                                z: 2,
                                animationEasing: "elasticOut"
                            },
                            {
                                // label
                                type: "pictorialBar",
                                symbolBoundingData: total,
                                itemStyle: {
                                    normal: {
                                        color: "none"
                                    }
                                },
                                label: {
                                    normal: {
                                        formatter: params => {
                                            let text;
                                            console.log(params.dataIndex);
                                            if (params.dataIndex%3 === 0) {
                                                text = "{a|" + params.data + "}";
                                            } else if (params.dataIndex%3 === 1) {
                                                text = "{b|" + params.data + "}";
                                            } else if (params.dataIndex%3 === 2) {
                                                text = "{c|" + params.data + "}";
                                            }
                                            return text;
                                        },
                                        rich: {
                                            a: {
                                                color: that.colors[0]
                                            },
                                            b: {
                                                color: that.colors[1]
                                            },
                                            c: {
                                                color: that.colors[2]
                                            }
                                        },
                                        position: "right",
                                        distance: 10, // 向右偏移位置
                                        show: true
                                    }
                                },
                                data: yAxisData,
                                z: 10
                            }
                        ]
                    });
                }
            }
        }
    }
    ;
</script>
<style lang="less">
    .topBox {
        padding: 15px 17px;
        height: 318px;
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 32px;
        background: url(../assets/img/border1-1.png) no-repeat center center / 100%
        100%;

        .info-name {
            color: #d5b574;
        }

        .tops {
            width: 49%;
            height: 100%;
        }

        .wordBox {
            width: 51%;
            height: 100%;
            background: url(../assets/img/dq.png) no-repeat center center / 100% 100%;
        }

        #myChart {
            width: 100%;
            height: 100%;
        }
    }
</style>
